<template>
  <div class="relative_height">
    <Navbar :indexWidth="true" ref="navbarRef" />
    <div class="info indexWidth u-flex u-col-top">
      <div class="navbar">
        <div class="nav_wrap">
          <div class="nav_uploader">
            <div class="nav_img">
              <img :src="userInfo.avatar.preview_url" v-if="userInfo.avatar" />
              <img src="../../image/mine/head.png" v-else />
            </div>
            <img
              src="../../image/mine/adult.png"
              v-if="userInfo.user_type == 20"
              class="nav_identity"
            />
            <img
              src="../../image/mine/student.png"
              v-if="userInfo.user_type == 10"
              class="nav_identity"
            />
          </div>
          <div class="nav_name">{{ userInfo.user_name }}</div>
        </div>
        <div
          class="nav_item u-flex-center hand"
          v-for="(item, index) in navList"
          :class="{ active: navIndex === item.id }"
          @click="navClick(item.id)"
        >
          <div class="nav_line" v-if="navIndex === item.id"></div>
          <div class="nav_text">{{ item.name }}</div>
        </div>
      </div>
      <!-- 培训中心 -->
      <div class="form" v-if="navIndex === 7">
        <div class="form_tit stu_tit">培训目标</div>
        <div class="stu_top u-flex-col u-row-center">
          <div class="stu_cont u-flex">
            <img src="../../image/mine/stu_sign.png" alt="" />
            以具体分工为起点，扩展出相关的扫盲内容，让学员全面理解每个模块。
          </div>
          <div class="stu_cont u-flex">
            <img src="../../image/mine/stu_sign.png" alt="" />
            提供操作具体流程，确保学员在实际执行时能够明确实际工作相关流程。
          </div>
          <div class="stu_cont u-flex">
            <img src="../../image/mine/stu_sign.png" alt="" />
            培训后，学员能够按照 SOP 快速上岗并完成相关任务。
          </div>
        </div>
        <div class="form_tit stu_tit">电商模块培训内容</div>
        <div class="stu_process">
          <div
            class="process_item u-flex u-col-top"
            v-for="(item, index) in processList"
            :key="index"
          >
            <div class="process_num u-flex-center"></div>
            <div class="process_cont u-flex">
              <div class="process_title u-flex">
                <img :src="imgUrl + item.icon" class="process_icon" />
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 个人简介 -->
      <div class="form" v-if="navIndex === 1">
        <div class="form_tit">{{ navList.find(item => item.id === navIndex).name }}</div>
        <div class="form_basic">
          <div class="basic_tit u-flex">
            <img src="../../image/mine/basic.png" alt="" />
            基本信息
          </div>
          <div class="basic_head u-flex">
            头像：
            <el-upload
              class="basic_uploader hand"
              :action="apiUrl"
              :disabled="companyShow"
              :show-file-list="false"
              :data="uploadData"
              :on-success="
                (res, file) => {
                  handleAvatarSuccess(4, res)
                }
              "
              :before-upload="
                file => {
                  beforeAvatarUpload(file)
                }
              "
            >
              <div class="basic_img">
                <img :src="headImg" v-if="headImg" />
                <img src="../../image/mine/head.png" v-else />
              </div>
              <img src="../../image/mine/camera.png" class="basic_camera hand" />
            </el-upload>
          </div>
          <el-form
            class="company_form"
            :model="companyForm"
            :hide-required-asterisk="true"
            ref="companyRef"
            label-position="top"
          >
            <div class="u-flex u-row-between u-flex-wrap">
              <el-form-item label="账号：" class="company_input">
                <el-input disabled v-model="userInfo.user_name" placeholder="请输入公司账号">
                </el-input>
              </el-form-item>
              <el-form-item label="性别：" class="company_input">
                <el-select
                  :disabled="companyShow"
                  v-model="companyForm.sex"
                  placeholder="请选择性别"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in genderOptions"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="出生日期：" class="company_input company_mb20">
                <el-date-picker
                  :disabled="companyShow"
                  v-model="companyForm.birthday"
                  type="date"
                  placeholder="请选择出生日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100%"
                  :clearable="false"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="basic_tit u-flex">
              <img src="../../image/mine/phone.png" alt="" />
              联系方式
            </div>
            <div class="u-flex u-flex-wrap u-row-between">
              <el-form-item label="联系电话：" prop="phone" class="company_input">
                <el-input
                  :disabled="companyShow"
                  v-model="companyForm.phone"
                  placeholder="请输入联系电话"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="电子邮箱：" prop="company_email" class="company_input">
                <el-input
                  v-model="companyForm.company_email"
                  :disabled="companyShow"
                  placeholder="请输入电子邮箱"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="个人简介：" prop="desc" class="custom_textarea">
                <el-input
                  type="textarea"
                  :disabled="companyShow"
                  v-model="companyForm.desc"
                  placeholder="请输入个人简介"
                  :rows="4"
                >
                </el-input>
              </el-form-item>
            </div>
          </el-form>
          <div class="next_btn next_btn_company u-flex-center hand" @click="companyStep">
            {{ companyShow ? '修改' : '保存' }}
          </div>
        </div>
      </div>
      <!-- 采购清单 -->
      <div class="form" v-if="navIndex === 3">
        <div class="form_tit">全部商品</div>
        <div class="form_content width_100" v-if="purchaseList.length > 0">
          <!-- 顶部操作栏 -->
          <div class="list_header u-flex u-row-between">
            <div class="header_left u-flex">
              <div class="select_all u-flex-center hand" @click="toggleSelectAll">
                <div class="checkbox u-flex-center" :class="{ active: isSelectAll }">
                  <img src="../../image/mine/sign.png" class="sign_img" v-if="isSelectAll" />
                </div>
                <span>全选</span>
              </div>
              <div class="delete_btn u-flex-center hand" @click="deleteSelected">删除</div>
            </div>
          </div>

          <!-- 商品列表 -->
          <div class="product_list">
            <div
              class="product_item u-flex"
              v-for="(item, index) in currentPageProducts"
              :key="index"
            >
              <!-- 选择框 -->
              <div class="item_checkbox u-flex-center hand" @click="toggleSelect(item)">
                <div class="checkbox u-flex-center" :class="{ active: item.selected }">
                  <img src="../../image/mine/sign.png" class="sign_img" />
                </div>
              </div>

              <!-- 商品图片 -->
              <div
                class="item_image hand"
                @mouseenter="showPreview(index)"
                @mouseleave="hidePreview"
              >
                <div class="img">
                  <img :src="item.goods.goods_image" />
                </div>
                <div class="img_pre u-flex-center hand">
                  <img src="../../image/mine/magnifier.png" alt="" />
                </div>
                <!-- 悬浮放大图片 -->
                <div v-if="previewIndex === index" class="image_preview">
                  <img :src="item.goods.goods_image" />
                </div>
              </div>

              <!-- 商品信息 -->
              <div class="item_info">
                <div class="item_title">{{ item.goods.goods_name }}</div>
                <div class="item_desc">{{ item.description }}</div>
              </div>

              <!-- 数量控制 -->
              <!-- <div class="item_quantity u-flex">
                <img
                  src="../../image/mine/minus.png"
                  class="quantity_btn hand"
                  @click="decreaseQuantity(item)"
                />
                <input
                  type="number"
                  class="quantity_input"
                  v-model="item.quantity"
                  @change="updateQuantity(item)"
                  min="1"
                />
                <img
                  src="../../image/mine/plus.png"
                  class="quantity_btn quantity_btn_plus hand"
                  @click="increaseQuantity(item)"
                />
              </div> -->

              <!-- 删除按钮 -->
              <div
                class="item_delete u-flex-center hand"
                :class="{ active: item.selected }"
                @click="deleteItem(item)"
              >
                删除
              </div>
            </div>
          </div>

          <!-- 分页组件 -->
          <Pagination
            class="pagination"
            v-model:currentPage="currentPage"
            :pageSize="pageSize"
            :total="total"
            :maxVisible="5"
            v-if="pageSize < total"
            @page-change="handlePageChange"
          />
        </div>
        <div class="form_content u-flex-center width_100" v-else>
          <div class="empty_tip">暂无采购商品</div>
        </div>
      </div>

      <!-- 资质审核 -->
      <div class="form" v-if="navIndex === 4">
        <div class="form_tit">{{ navList.find(item => item.id === navIndex).name }}</div>
        <!-- 审核中 -->
        <div class="examine" v-if="examineStatus === 1">
          <img src="../../image/login/examine.png" class="img1" />
          <div class="exa_tit">审核中</div>
          <div class="exa_tip">资质审核预计需要1-3个工作日，请耐心等待</div>
        </div>
        <!-- 审核失败 -->
        <div class="examine" v-if="examineStatus === 2">
          <img src="../../image/mine/error.png" class="img1" />
          <div class="exa_tit">审核失败</div>
          <div class="exa_tip">请核对并修改信息后，在重新提交</div>
          <div class="exa_prompt">
            <div class="pro_tit">您提交的内容有如下错误：</div>
            <div class="pro_cont u-flex u-col-top">
              <img src="../../image/mine/cha.png" class="pro_cha" />
         {{ certification.err_message }}
            </div>
          </div>
          <div class="exa_btn u-flex-center hand" @click="againSubmit">重新提交</div>
        </div>
        <!-- 审核通过
        <div class="examine" v-if="examineStatus === 3">
          <img src="../../image/mine/success.png" class="img1" />
          <div class="exa_tit">审核通过</div>
        </div> -->
        <el-form
          class="form_content"
          :model="basicForm"
          :hide-required-asterisk="true"
          :rules="basicRules"
          ref="basicRef"
          label-position="top"
          v-if="examineStatus === 3"
        >
          <el-form-item label="姓名" prop="name" class="custom-label">
            <el-input
              class="custom-input"
              :disabled="examineShow"
              v-model="basicForm.name"
              placeholder="请输入姓名"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="card" class="custom-label">
            <el-input
              class="custom-input"
              :disabled="examineShow"
              v-model="basicForm.card"
              placeholder="请输入身份证号"
            >
            </el-input>
          </el-form-item>
          <div class="card_wrap u-flex u-row-between">
            <el-form-item label="身份证:" prop="card_image_id">
              <div class="form_upload" v-if="examineShow">
                <img :src="cardImg1" class="card_img" />
                <!-- <img src="../../image/login/cha.png" class="card_icon hand" @click="delateClick(1)"></img> -->
              </div>
              <el-upload
                v-else
                class="form_upload hand form_blue"
                :action="apiUrl"
                :show-file-list="false"
                :data="uploadData"
                :disabled="examineShow"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(1, res)
                  }
                "
                :before-upload="
                  file => {
                    beforeAvatarUpload(file)
                  }
                "
              >
                <div class="upload_img">
                  <img :src="cardImg1" />
                </div>
                <div class="upload_abo">重新上传</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="" prop="card_image2_id">
              <div class="form_upload mt_10" v-if="examineShow">
                <img :src="cardImg2" class="card_img" />
                <!-- <img src="../../image/login/cha.png" class="card_icon hand" @click="delateClick(2)"></img> -->
              </div>

              <el-upload
                v-else
                class="form_upload mt_10 hand form_blue"
                :action="apiUrl"
                :show-file-list="false"
                :data="uploadData"
                :disabled="examineShow"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(2, res)
                  }
                "
                :before-upload="
                  file => {
                    beforeAvatarUpload(file)
                  }
                "
              >
                <div class="upload_img">
                  <img :src="cardImg2" />
                </div>
                <div class="upload_abo">重新上传</div>
              </el-upload>
            </el-form-item>
          </div>
          <el-form-item label="联系人手机号：" prop="mobile" class="custom-label">
            <el-input
              class="custom-input"
              :disabled="examineShow"
              v-model="basicForm.mobile"
              placeholder="请输入联系人手机号"
            >
            </el-input>
          </el-form-item>
          <div class="next_btn u-flex-center hand" @click="reSubmit" v-if="!examineShow">提交</div>
        </el-form>
      </div>
      <!-- 密码修改 -->
      <div class="form" v-if="navIndex === 5">
        <div class="form_tit">{{ navList.find(item => item.id === navIndex).name }}</div>
        <el-form
          class="form_content"
          :model="ruleForm"
          :hide-required-asterisk="true"
          :rules="rules"
          ref="formRef"
          label-position="top"
        >
          <el-form-item label="当前密码" prop="currentPassword" class="custom-label">
            <el-input
              :type="passwordType3"
              v-model="ruleForm.currentPassword"
              placeholder="请输入当前密码"
            >
              <template #suffix>
                <img
                  src="../../image/login/eyeB.png"
                  @click="eyeClick(3)"
                  v-if="passwordType3 === 'password'"
                  class="eye-icon hand"
                />
                <img
                  src="../../image/login/eye.png"
                  v-else
                  @click="eyeClick(3)"
                  class="eye-icon hand"
                />
              </template>
            </el-input>
            <!-- <div class="form-tip">密码长度该为8-16个字母，并且组合如下：字母，数字和符号</div> -->
          </el-form-item>
          <el-form-item label="新密码" prop="password" class="custom-label">
            <el-input :type="passwordType" v-model="ruleForm.password" placeholder="请输入新密码">
              <template #suffix>
                <img
                  src="../../image/login/eyeB.png"
                  @click="eyeClick(1)"
                  v-if="passwordType === 'password'"
                  class="eye-icon hand"
                />
                <img
                  src="../../image/login/eye.png"
                  v-else
                  @click="eyeClick(1)"
                  class="eye-icon hand"
                />
              </template>
            </el-input>
            <!-- <div class="form-tip">密码长度该为8-16个字母，并且组合如下：字母，数字和符号</div> -->
          </el-form-item>
          <el-form-item label="确认密码" prop="againPassword" class="custom-label">
            <el-input
              :type="passwordType2"
              v-model="ruleForm.againPassword"
              placeholder="请确认密码"
            >
              <template #suffix>
                <img
                  src="../../image/login/eyeB.png"
                  @click="eyeClick(2)"
                  v-if="passwordType2 === 'password'"
                  class="eye-icon hand"
                />
                <img
                  src="../../image/login/eye.png"
                  v-else
                  @click="eyeClick(2)"
                  class="eye-icon hand"
                />
              </template>
            </el-input>
          </el-form-item>
          <div class="next_btn u-flex-center hand" @click="oneStep">确认修改</div>
        </el-form>
      </div>

      <!-- 退出登录弹窗 -->
      <el-dialog v-model="exitShow" :show-close="false" :close-on-click-modal="false" align-center>
        <div class="log_out u-flex-col u-col-center u-row-center">
          <div class="tit">确定要退出当前用户吗?</div>
          <div class="u-flex u-flex-center">
            <div class="btn btn_bor u-flex-center hand" @click="exitShow = false">取消</div>
            <div class="btn u-flex-center hand" @click="exitClick">确认</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { useRouter, useRoute } from 'vue-router'
  import { ref, onMounted, watch, computed, getCurrentInstance, reactive } from 'vue'
  import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'
  import Pagination from '../../components/currency/pagination.vue'
  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const apiUrl = appContext.config.globalProperties.$apiUrl
  const store = useStore()
  const router = useRouter()
  const route = useRoute()

  const navList = ref([
    {
      id: 1,
      name: '个人简介',
    },
    {
      id: 2,
      name: '我要采购',
    },
    {
      id: 3,
      name: '采购清单',
    },
    {
      id: 4,
      name: '资质审核',
    },
    {
      id: 5,
      name: '密码修改',
    },
    {
      id: 6,
      name: '退出登录',
    },
  ])

  // 导航栏ref
  const navbarRef = ref(null)

  // 左侧导航栏位置
  const navIndex = ref(null)

  // 悬浮图片预览索引
  const previewIndex = ref(null)

  // 采购清单相关数据
  const purchaseList = ref([])
  const currentPage = ref(1)
  const pageSize = ref(6)
  const total = ref(0)

  // 头像
  const headImg = ref(null)
  const head_image_id = ref(null)

  // 店铺id
  const store_id = ref(null)
  // 上传图片
  const uploadData = ref({
    checkLogin: 0,
    storeUserId: 0,
  })

  // 用户信息
  const userInfo = ref({})
  const certification = ref({}) //个人简介

  // 审核状态
  const examineStatus = ref(null) //1审核中 2审核失败 3审核通过
  //资质审核是否可编辑
  const examineShow = ref(true)

  // 个人简介
  const companyShow = ref(true)
  const companyRef = ref(null)
  const companyForm = reactive({
    phone: null,
    company_email: null,
    birthday: null,
    desc: null,
    sex: null,
  })

  // 性别选项
  const genderOptions = ref([{ label: '男' }, { label: '女' }])

  // 退出登录
  const exitShow = ref(false)

  // 修改密码
  const formRef = ref(null)
  const passwordType = ref('password')
  const passwordType2 = ref('password')
  const passwordType3 = ref('password')
  const ruleForm = reactive({
    password: null,
    againPassword: null,
    currentPassword: null,
  })

  // 自定义验证函数
  const validateAgainPassword = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请确认密码'))
    } else if (value !== ruleForm.password) {
      callback(new Error('两次密码输入不一致'))
    } else {
      callback()
    }
  }
  const rules = reactive({
    currentPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
    password: [
      { required: true, message: '请输入登录密码', trigger: 'blur' },
      {
        min: 6,
        max: 20,
        message: '密码长度该为8-16个字母，并且组合如下：字母，数字和符号',
        trigger: ['blur', 'change'],
      },
      {
        pattern: /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).+$/,
        message: '密码是由大小写字母，数字组成',
        trigger: ['blur', 'change'],
      },
    ],
    againPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      { validator: validateAgainPassword, trigger: ['blur', 'change'] },
    ],
  })
  // 资质审核
  const basicRef = ref(null)
  const basicForm = reactive({
    name: null,
    card: null,
    card_image_id: null,
    card_image2_id: null,
    mobile: null,
    store_user_id: null,
  })
  const basicRules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    card: [
      { required: true, message: '请输入身份证号', trigger: 'blur' },
      { min: 18, max: 18, message: '身份证长度18位', trigger: 'blur' },
      {
        pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/,
        message: '身份证号格式不正确',
        trigger: 'blur',
      },
    ],
    card_image_id: [{ required: true, message: '请上传身份证人像面', trigger: 'blur' }],
    card_image2_id: [{ required: true, message: '请上传身份证国徽面', trigger: 'blur' }],
    mobile: [
      { required: true, message: '请输入公司联系电话', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '联系电话格式错误', trigger: 'blur' },
      { min: 11, max: 11, message: '联系电话长度11个字符', trigger: 'blur' },
    ],
  })
  const cardImg1 = ref(null)
  const cardImg2 = ref(null)
  const licenseImg = ref(null)

  // 培训流程数据
  const processList = ref([
    {
      title: '市场调研与选品',
      icon: '/mine/stu_icon1.png',
    },
    {
      title: '产品上架与页面优化',
      icon: '/mine/stu_icon2.png',
    },
    {
      title: '订单处理与售后服务',
      icon: '/mine/stu_icon3.png',
    },
    {
      title: '广告投放与数据分析',
      icon: '/mine/stu_icon4.png',
    },
    {
      title: '短视频营销',
      icon: '/mine/stu_icon5.png',
    },
    {
      title: '翻译',
      icon: '/mine/stu_icon6.png',
    },
    {
      title: '电商平台运营',
      icon: '/mine/stu_icon7.png',
    },
  ])

  // 监听密码变化，实时验证确认密码
  watch(
    () => ruleForm.password,
    newVal => {
      if (ruleForm.againPassword && newVal !== ruleForm.againPassword) {
        setTimeout(() => {
          formRef.value?.validateField('againPassword')
        }, 0)
      }
    }
  )

  // 监听确认密码变化
  watch(
    () => ruleForm.againPassword,
    newVal => {
      if (newVal && ruleForm.password && newVal !== ruleForm.password) {
        setTimeout(() => {
          formRef.value?.validateField('againPassword')
        }, 0)
      }
    }
  )

  onMounted(() => {
    userInfoFn() //用户信息
  })

  // 用户信息
  const userInfoFn = () => {
    store.dispatch('home/userInfoApi').then(res => {
      if (res.status == 200) {
        userInfo.value = res.data.userInfo //总用户信息
        certification.value = res.data.userInfo.certification //个人简介，个人简介，审核状态等

        // 如果是学员类型，在导航列表首位添加培训目标
        if (userInfo.value.user_type == 10) {
          // 检查是否已存在id为7的项
          const hasTrainingItem = navList.value.some(item => item.id === 7)
          if (!hasTrainingItem) {
            navList.value.unshift({
              id: 7,
              name: '培训目标',
            })
          }
        }

        navIndex.value = navList.value[0].id

        //上传图片用  用户id
        uploadData.value.storeUserId = userInfo.value.store_user_id || ''

        // 头像
        headImg.value = userInfo.value.avatar ? userInfo.value.avatar.preview_url : ''
        head_image_id.value = userInfo.value.avatar_id == 0 ? '' : userInfo.value.avatar_id

        // 个人简介
        companyForm.phone = certification.value.phone
        companyForm.company_email = certification.value.company_email
        companyForm.birthday = certification.value.birthday
        companyForm.desc = certification.value.desc
        companyForm.sex = certification.value.sex

        // 资质审核
        basicForm.name = certification.value.name
        basicForm.card = certification.value.card
        basicForm.mobile = certification.value.mobile
        basicForm.card_image_id = certification.value.card_image.file_id
        basicForm.card_image2_id = certification.value.card_image2.file_id
        cardImg1.value = certification.value.card_image.preview_url
        cardImg2.value = certification.value.card_image2.preview_url
        basicForm.store_user_id = userInfo.value.store_user_id

        // 资质审核
        examineStatus.value = userInfo.value.certification_status

        cartListFn() //购物车列表
      }
    })
  }

  // 购物车列表
  const cartListFn = () => {
    store.dispatch('home/cartListApi').then(res => {
      if (res.data.list.data) {
        // 为每个商品添加 selected 属性
        const productsWithSelection = res.data.list.data.map(item => ({
          ...item,
          selected: false,
        }))
        purchaseList.value = productsWithSelection
        total.value = res.data.list.total

        // console.log('处理后的商品列表:', purchaseList.value)
        // console.log('当前页:', currentPage.value)
        // console.log('每页数量:', pageSize.value)

        // 如果当前页没有数据，跳转到最后一页
        const maxPage = Math.ceil(purchaseList.value.length / pageSize.value)
        if (currentPage.value > maxPage && maxPage > 0) {
          currentPage.value = maxPage
        }
        // console.log('当前页商品:', currentPageProducts.value)
      }
    })
  }

  // 当前页显示的商品
  const currentPageProducts = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    const result = purchaseList.value.slice(start, end)
    // console.log('计算当前页商品:', { start, end, result })
    return result
  })

  // 是否全选
  const isSelectAll = computed(() => {
    return (
      currentPageProducts.value.length > 0 && currentPageProducts.value.every(item => item.selected)
    )
  })

  // 分页变化处理
  const handlePageChange = page => {
    currentPage.value = page
  }

  // 采购清单相关方法
  const toggleSelectAll = () => {
    const newState = !isSelectAll.value
    currentPageProducts.value.forEach(item => {
      item.selected = newState
    })
  }

  const toggleSelect = item => {
    item.selected = !item.selected
  }

  const deleteSelected = () => {
    const selectedItems = purchaseList.value.filter(item => item.selected)
    if (selectedItems.length === 0) {
      ElMessage.warning('请先选择要删除的商品')

      return
    }

    ElMessageBox.confirm('确定要删除选中的商品吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        // 获取选中商品的id数组
        const cartIds = selectedItems.map(item => item.id)

        // 调用删除购物车接口
        store
          .dispatch('home/deleteCartApi', { cartIds })
          .then(res => {
            if (res.status === 200) {
              // 从本地列表中移除选中的商品
              purchaseList.value = purchaseList.value.filter(item => !item.selected)

              // 删除后检查分页
              const maxPage = Math.ceil(purchaseList.value.length / pageSize.value)
              if (currentPage.value > maxPage && maxPage > 0) {
                currentPage.value = maxPage
              }
              cartListFn()
              ElMessage.success('删除成功')
            } else {
              ElMessage.error(res.message || '删除失败')
            }
          })
          .catch(error => {
            console.error('删除购物车商品失败:', error)
            ElMessage.error('删除失败，请重试')
          })
      })
      .catch(() => {
        // 取消删除
      })
  }

  const deleteItem = item => {
    ElMessageBox.confirm('确定要删除这个商品吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        // 获取商品的id
        const cartIds = [item.id]

        // 调用删除购物车接口
        store
          .dispatch('home/deleteCartApi', { cartIds })
          .then(res => {
            if (res.status === 200) {
              cartListFn()

              // const index = purchaseList.value.findIndex(p => p.id === item.id)
              // if (index > -1) {
              //   purchaseList.value.splice(index, 1)

              //   // 删除后检查分页
              //   const maxPage = Math.ceil(purchaseList.value.length / pageSize.value)
              //   if (currentPage.value > maxPage && maxPage > 0) {
              //     currentPage.value = maxPage
              //   }

              //   ElMessage.success('删除成功')
              // }
            } else {
              ElMessage.error(res.message || '删除失败')
            }
          })
          .catch(error => {
            console.error('删除购物车商品失败:', error)
            ElMessage.error('删除失败，请重试')
          })
      })
      .catch(() => {
        // 取消删除
      })
  }

  // const increaseQuantity = item => {
  //   item.quantity++
  // }

  // const decreaseQuantity = item => {
  //   if (item.quantity > 1) {
  //     item.quantity--
  //   }
  // }

  // const updateQuantity = item => {
  //   if (item.quantity < 1) {
  //     item.quantity = 1
  //   }
  // }

  const eyeClick = type => {
    if (type == 1) {
      passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
    } else if (type == 2) {
      passwordType2.value = passwordType2.value === 'password' ? 'text' : 'password'
    } else if (type == 3) {
      passwordType3.value = passwordType3.value === 'password' ? 'text' : 'password'
    }
  }

  const navClick = id => {
    if (id == 6) {
      exitShow.value = true
    } else if (id == 2) {
      if (userInfo.value.certification_status == 3) {
        router.push('/purchaseShop')
      } else {
        ElMessage.warning('您的资质暂未审核完成，审核通过后即可采购产品，请您耐心等待！')
      }
    } else {
      navIndex.value = id
    }
  }

  // 判断图片是否符合规格
  const beforeAvatarUpload = file => {
    let isJPG = file.type === 'image/jpeg'
    let isPNG = file.type === 'image/png'
    let isLt5M = file.size / 1024 / 1024 < 5

    console.log(isJPG, isPNG, isLt5M, file.size / 1024 / 1024, '判断')
    if (!isJPG && !isPNG) {
      ElMessage.error('只能上传 JPG/PNG 格式的图片!')
      return false
    }

    if (!isLt5M) {
      ElMessage.error('上传图片大小不能超过 5MB!')
      return false
    }

    return (isPNG || isJPG) && isLt5M
  }

  // 成功获取图片
  const handleAvatarSuccess = (type, res) => {
    let preview_url = res.data.fileInfo.preview_url
    let file_id = res.data.fileInfo.file_id

    if (type == 1) {
      //身份证正面
      cardImg1.value = preview_url
      basicForm.card_image_id = file_id
    } else if (type == 2) {
      //身份证反面
      cardImg2.value = preview_url
      basicForm.card_image2_id = file_id
    } else if (type == 4) {
      //头像
      headImg.value = preview_url
      head_image_id.value = file_id
    }
  }

  // 删除图片
  const delateClick = type => {
    if (type == 1) {
      cardImg1.value = null
      basicForm.card_image_id = null
    } else if (type == 2) {
      cardImg2.value = null
      basicForm.card_image2_id = null
    }
  }

  // 修改头像
  const changeAvatar = () => {
    store
      .dispatch('home/changeAvatarApi', {
        avatarId: head_image_id.value,
      })
      .then(res => {})
  }

  // 个人简介
  const companyStep = () => {
    if (!companyShow.value) {
      store.dispatch('home/reSetInfoApi', { form: companyForm }).then(res => {
        if (res.status == 200) {
          changeAvatar() //修改头像

          ElNotification({
            title: '成功',
            message: res.message,
            type: 'success',
            duration: 1500,
          })
          setTimeout(() => {
            navbarRef.value.userInfoFn()
            userInfoFn()
          }, 1500)
        } else {
          ElNotification({
            title: '失败',
            message: res.message,
            type: 'error',
            duration: 2000,
          })
        }
      })
    }
    companyShow.value = !companyShow.value
  }

  // 资质审核-重新提交
  const againSubmit = () => {
    examineStatus.value = 3
    examineShow.value = false
  }

  // 资质审核
  const reSubmit = () => {
    basicRef.value.validate(valid => {
      if (valid) {
        store.dispatch('home/certificationCaiApi', deepRemoveNull(basicForm)).then(res => {
          if (res.status == 200) {
            ElNotification({
              title: '成功',
              message: res.message,
              type: 'success',
              duration: 2000,
            })
            setTimeout(() => {
              userInfoFn()
            }, 1500)
          } else {
            ElNotification({
              title: '失败',
              message: res.message,
              type: 'error',
              duration: 2000,
            })
          }
        })
      }
    })
  }

  // 修改密码
  const oneStep = () => {
    formRef.value.validate(valid => {
      if (valid) {
        let form = {
          real_name: userInfo.value.real_name,
          user_name: userInfo.value.user_name,
          password: ruleForm.currentPassword,
          password_confirm: ruleForm.password,
        }
        store.dispatch('home/renewApi', { form: form }).then(res => {
          if (res.status == 200) {
            ElNotification({
              title: '成功',
              message: res.message,
              type: 'success',
              duration: 1500,
            })
            setTimeout(() => {
              exitClick()
            }, 1500)
          } else {
            ElNotification({
              title: '失败',
              message: res.message,
              type: 'error',
              duration: 2000,
            })
          }
        })
      } else {
        return false
      }
    })
  }

  // 显示图片预览
  const showPreview = index => {
    previewIndex.value = index
  }

  // 隐藏图片预览
  const hidePreview = () => {
    previewIndex.value = null
  }

  // 退出登录
  const exitClick = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('is_super') //身份
    router.push('/login')
  }

  const deepRemoveNull = obj => {
    if (typeof obj !== 'object' || obj === null) return obj

    return Object.entries(obj).reduce((acc, [key, value]) => {
      const cleanedValue = deepRemoveNull(value)
      if (cleanedValue !== null) {
        acc[key] = cleanedValue
      }
      return acc
    }, {})
  }
</script>

<style scoped lang="less">
  // 兼容
  @media screen and (max-width: 1920px) {
    // label文字
    :deep(.el-form-item__label) {
      font-size: 14px !important;
    }
    // 输入外框
    :deep(.el-input__wrapper) {
      height: 45px !important;
      border-radius: 10px !important;
    }

    // el-select样式适配（与el-input同步）
    :deep(.el-select__wrapper) {
      height: 45px !important;
      border-radius: 10px !important;
      font-size: 14px !important;
    }
    :deep(.el-select__selection .el-select__selected-item),
    :deep(.el-select__placeholder) {
      font-size: 14px !important;
    }
    :deep(.el-select-dropdown__item) {
      font-size: 14px !important;
      height: 36px !important;
      line-height: 36px !important;
      padding: 0 12px !important;
    }
    :deep(.el-select__wrapper.is-focused) {
      box-shadow: 0 0 0 1px #5463ff inset !important;
    }

    // 日期选择器样式适配
    :deep(.el-date-editor.el-input__wrapper) {
      height: 45px !important;
      border-radius: 10px !important;
    }
    // 个人简介文本域字号适配
    :deep(.el-textarea .el-textarea__inner) {
      font-size: 14px !important;
    }

    // 日期选择器图标位置适配
    :deep(.el-date-editor .el-input__suffix) {
      right: 12px !important;
      position: absolute !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
    }
    // 输入框文字
    :deep(.el-input__inner) {
      font-size: 14px !important;
    }
    // 红色提示文字
    :deep(.el-form-item__error) {
      margin-top: 2px !important;
    }

    .relative_height {
      padding: 20px 0 60px 0 !important;

      .info {
        .navbar {
          width: 260px !important;
          min-height: 85vh !important;
          margin-right: 18px !important;
          padding: 0 7px !important;

          .nav_wrap {
            padding: 35px 0 !important;
          }

          .nav_uploader {
            width: 68px !important;

            .nav_identity {
              width: 50px !important;
              bottom: -4px !important;
            }

            .nav_img {
              width: 68px !important;
            }
          }

          .nav_name {
            margin-top: 10px !important;
            font-size: 15px !important;
          }

          .nav_item {
            height: 55px !important;
            font-size: 15px !important;
          }
        }

        .form {
          min-height: 85vh !important;
          padding: 27px 33px 27px !important;

          .form_tit {
            font-size: 17px !important;
            margin-bottom: 55px !important;
          }

          .form_content {
            width: 52% !important;
          }

          .width_100 {
            width: 100% !important;
          }

          // 个人简介适配
          .form_basic {
            width: 70% !important;

            .basic_tit {
              font-size: 16px !important;
              padding: 12px 0 !important;
              margin-bottom: 22px !important;

              img {
                width: 23px !important;
              }
            }

            .basic_head {
              padding-bottom: 22px !important;

              .basic_uploader {
                width: 75px !important;

                .basic_camera {
                  width: 24px !important;
                  bottom: 3px !important;
                  right: -1px !important;
                }

                .basic_img {
                  width: 75px !important;
                }
              }
            }

            .company_form {
              .company_input {
                width: 48% !important;
              }

              .company_mb20 {
                margin-bottom: 20px !important;
              }

              .custom_textarea {
                width: 100% !important;
              }
            }
          }

          // 暂无采购商品
          .empty_tip {
            font-size: 15px !important;
            padding-top: 300px !important;
          }

          .custom-label {
            margin-bottom: 23px !important;
          }

          .eye-icon {
            width: 24px !important;
          }

          .form-tip {
            font-size: 13px !important;
            padding: 1px 0 0 10px !important;
          }

          .card_wrap {
            margin-bottom: 8px !important;
          }

          .form_upload {
            width: 230px !important;

            .img {
              width: 40px !important;
            }

            .text {
              font-size: 13px !important;
            }

            .card_icon {
              width: 18px !important;
              top: 8px !important;
              right: 8px !important;
            }

            .upload_abo {
              font-size: 13px !important;
            }
          }

          .mt_10 {
            margin-top: 30px !important;
          }

          .stu_tit {
            margin-bottom: 27px !important;
          }

          .stu_top {
            aspect-ratio: 16/3.7 !important;
            padding-left: 65px !important;
            margin: 0px 0 27px 0 !important;

            .stu_cont {
              width: 500px !important;
              height: 35px !important;
              padding-left: 12px !important;
              font-size: 13px !important;
              margin-bottom: 18px !important;

              img {
                width: 17px !important;
                margin-right: 7px !important;
              }

              &:last-child {
                margin-bottom: 0 !important;
              }
            }
          }

          // 培训流程样式
          .stu_process {
            padding-bottom: 15px !important;

            .process_item {
              margin-bottom: 25px !important;

              &:not(:last-child):after {
                left: 17px !important;
              }

              .process_num {
                width: 35px !important;
                height: 35px !important;
                margin: 15px 25px 0 0 !important;
              }

              .process_cont {
                padding: 0 25px !important;
                height: 60px !important;
              }

              .process_title {
                font-size: 14px !important;
              }

              .process_icon {
                width: 33px !important;
                margin-right: 18px !important;
              }
            }
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 15px !important;

              .select_all {
                font-size: 13px !important;
                gap: 6px !important;

                .checkbox {
                  width: 14px !important;
                  height: 14px !important;

                  .sign_img {
                    width: 8px !important;
                  }
                }
              }

              .delete_btn {
                padding: 5px 10px !important;
                font-size: 12px !important;
              }
            }
          }

          .product_list {
            .product_item {
              padding: 15px 0 !important;
              gap: 12px !important;

              .item_checkbox {
                .checkbox {
                  width: 18px !important;
                  height: 18px !important;

                  .sign_img {
                    width: 8px !important;
                  }
                }
              }

              .item_image {
                width: 80px !important;
                height: 80px !important;

                // 悬浮图片预览
                .image_preview {
                  left: 100px !important; /* 调整这个值来控制预览框的位置 */
                  border: 15px solid #fff;
                }
              }

              .item_info {
                .item_title {
                  font-size: 14px !important;
                  margin-bottom: 6px !important;
                }

                .item_desc {
                  font-size: 12px !important;
                }
              }

              // .item_quantity {
              //   gap: 4px !important;
              //   margin-right: 15px !important;
              //   padding: 3px 6px !important;

              //   .quantity_btn {
              //     width: 16px !important;
              //   }

              //   .quantity_btn_plus {
              //     width: 13px !important;
              //   }

              //   .quantity_input {
              //     width: 45px !important;
              //     height: 24px !important;
              //     font-size: 12px !important;
              //   }
              // }

              .item_delete {
                padding: 5px 10px 5px 0 !important;
                font-size: 12px !important;
              }
            }
          }
        }

        .examine {
          .exa_btn {
            width: 150px !important;
            margin-top: 25px !important;
            font-size: 13px !important;
            border-radius: 8px !important;
          }
        }
      }
    }

    .log_out {
      width: 430px !important;

      .tit {
        font-size: 16px !important;
        margin-bottom: 35px !important;
      }

      .btn {
        width: 120px !important;
        font-size: 13px !important;
        border-radius: 38px;
      }

      .btn_bor {
        margin-right: 13px !important;
      }
    }
  }

  @media screen and (max-width: 1700px) {
    // label文字
    :deep(.el-form-item__label) {
      font-size: 12px !important;
      margin-bottom: 6px !important;
    }
    // 输入外框
    :deep(.el-input__wrapper) {
      height: 35px !important;
      border-radius: 6px !important;
    }

    // el-select样式适配（与el-input同步）
    :deep(.el-select__wrapper) {
      height: 35px !important;
      border-radius: 6px !important;
      font-size: 12px !important;
    }
    :deep(.el-select__selection .el-select__selected-item),
    :deep(.el-select__placeholder) {
      font-size: 12px !important;
    }
    :deep(.el-select-dropdown__item) {
      font-size: 12px !important;
      height: 32px !important;
      line-height: 32px !important;
      padding: 0 10px !important;
    }
    :deep(.el-select__wrapper.is-focused) {
      box-shadow: 0 0 0 1px #5463ff inset !important;
    }

    // 日期选择器样式适配
    :deep(.el-date-editor.el-input__wrapper) {
      height: 35px !important;
      border-radius: 6px !important;
    }
    // 个人简介文本域字号适配
    :deep(.el-textarea .el-textarea__inner) {
      font-size: 12px !important;
    }

    // 日期选择器图标位置适配
    :deep(.el-date-editor .el-input__suffix) {
      right: 10px !important;
      position: absolute !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
    }
    // 输入框文字
    :deep(.el-input__inner) {
      font-size: 12px !important;
    }

    .relative_height {
      .info {
        .navbar {
          width: 240px !important;
          min-height: 83vh !important;
          margin-right: 15px !important;
          padding: 0 6px !important;

          .nav_wrap {
            padding: 30px 0 !important;
          }

          .nav_uploader {
            width: 60px !important;

            .nav_identity {
              width: 46px !important;
              // bottom: -4px !important;
            }

            .nav_img {
              width: 60px !important;
            }
          }

          .nav_name {
            font-size: 14px !important;
          }

          .nav_item {
            height: 50px !important;
            font-size: 14px !important;
          }
        }

        .form {
          min-height: 83vh !important;
          padding: 25px 30px 25px !important;

          .form_tit {
            font-size: 16px !important;
            margin-bottom: 50px !important;
          }

          .form_content {
            width: 54% !important;
          }

          .width_100 {
            width: 100% !important;
          }

          // 个人简介适配
          .form_basic {
            width: 70% !important;

            .basic_tit {
              font-size: 15px !important;
              padding: 10px 0 !important;
              margin-bottom: 20px !important;

              img {
                width: 20px !important;
              }
            }

            .basic_head {
              padding-bottom: 20px !important;

              .basic_uploader {
                width: 65px !important;

                .basic_camera {
                  width: 20px !important;
                  bottom: 2px !important;
                  right: -1px !important;
                }

                .basic_img {
                  width: 65px !important;
                }
              }
            }

            .company_form {
              .company_input {
                width: 48% !important;
              }

              .company_mb20 {
                margin-bottom: 10px !important;
              }

              .custom_textarea {
                width: 100% !important;
              }
            }
          }

          .custom-label {
            margin-bottom: 20px !important;
          }

          .eye-icon {
            width: 20px !important;
          }

          /* 默认提示文字样式 */
          .form-tip {
            font-size: 11px !important;
            padding: 0px 0 0 8px !important;
          }

          .card_wrap {
            margin-bottom: 8px !important;
          }

          .form_upload {
            width: 200px !important;
            border-radius: 6px !important;

            .img {
              width: 30px !important;
            }

            .text {
              font-size: 11px !important;
              line-height: 1 !important;
            }

            .card_icon {
              width: 16px !important;
              top: 6px !important;
              right: 6px !important;
            }

            .upload_abo {
              font-size: 13px !important;
            }
          }

          .mt_10 {
            margin-top: 27px !important;
          }

          .stu_tit {
            margin-bottom: 25px !important;
          }

          .stu_top {
            aspect-ratio: 16/3.9 !important;
            padding-left: 55px !important;
            margin: 0px 0 25px 0 !important;

            .stu_cont {
              width: 400px !important;
              height: 32px !important;
              padding-left: 8px !important;
              font-size: 11px !important;
              margin-bottom: 13px !important;

              img {
                width: 13px !important;
                margin-right: 5px !important;
              }

              &:last-child {
                margin-bottom: 0 !important;
              }
            }
          }

          // 培训流程样式
          .stu_process {
            padding-bottom: 10px !important;

            .process_item {
              margin-bottom: 20px !important;

              &:not(:last-child):after {
                left: 17px !important;
              }

              .process_num {
                width: 33px !important;
                height: 33px !important;
                margin: 13px 20px 0 0 !important;
              }

              .process_cont {
                padding: 0 20px !important;
                height: 55px !important;
              }

              .process_title {
                font-size: 13px !important;
              }

              .process_icon {
                width: 28px !important;
                margin-right: 15px !important;
              }
            }
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 12px !important;

              .select_all {
                font-size: 11px !important;
                gap: 5px !important;

                .checkbox {
                  width: 12px !important;
                  height: 12px !important;

                  .sign_img {
                    width: 6px !important;
                  }
                }
              }

              .delete_btn {
                padding: 4px 8px !important;
                font-size: 10px !important;
              }
            }
          }

          .product_list {
            .product_item {
              padding: 12px 0 !important;
              gap: 10px !important;

              .item_checkbox {
                .checkbox {
                  width: 16px !important;
                  height: 16px !important;

                  .sign_img {
                    width: 7px !important;
                  }
                }
              }

              .item_image {
                width: 70px !important;
                height: 70px !important;

                .img_pre {
                  width: 15px !important;
                  height: 15px !important;
                }

                // 悬浮图片预览
                .image_preview {
                  top: -60px !important;
                  left: 80px !important; /* 调整这个值来控制预览框的位置 */
                  width: 200px !important;
                  height: 200px !important;
                  border: 13px solid #fff !important;
                }
              }

              .item_info {
                .item_title {
                  font-size: 12px !important;
                  margin-bottom: 5px !important;
                }

                .item_desc {
                  font-size: 10px !important;
                }
              }

              // .item_quantity {
              //   gap: 3px !important;
              //   margin-right: 12px !important;
              //   padding: 2px 5px !important;

              //   .quantity_btn {
              //     width: 14px !important;
              //   }

              //   .quantity_btn_plus {
              //     width: 11px !important;
              //   }

              //   .quantity_input {
              //     width: 40px !important;
              //     height: 22px !important;
              //     font-size: 11px !important;
              //   }
              // }

              .item_delete {
                padding: 4px 8px 4px 0 !important;
                font-size: 10px !important;
              }
            }
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 12px !important;

              .select_all {
                font-size: 11px !important;
                gap: 5px !important;

                .checkbox {
                  width: 12px !important;
                  height: 12px !important;

                  .sign_img {
                    width: 6px !important;
                  }
                }
              }

              .delete_btn {
                padding: 4px 8px !important;
                font-size: 10px !important;
              }
            }
          }
        }

        .examine {
          padding: 130px 0px 0px !important;

          .img1 {
            width: 80px !important;
          }

          .img2 {
            width: 55px !important;
          }

          .exa_tit {
            font-size: 17px !important;
            margin: 20px 0 12px !important;
          }

          .exa_tip {
            font-size: 12px !important;
          }

          .exa_btn {
            width: 145px !important;
            margin-top: 25px !important;
            font-size: 13px !important;
            border-radius: 8px !important;
          }
        }

        .next_btn {
          height: 35px !important;
          font-size: 12px !important;
          border-radius: 6px !important;
          margin-top: 27px !important;
        }
      }
    }

    .log_out {
      width: 400px !important;

      .tit {
        font-size: 15px !important;
        margin-bottom: 32px !important;
      }

      .btn {
        width: 110px !important;
        font-size: 12px !important;
      }
    }
  }

  @media screen and (max-width: 1500px) {
    .relative_height {
      padding: 15px 0 50px 0 !important;

      .info {
        .navbar {
          width: 220px !important;
          min-height: 80vh !important;
          margin-right: 12px !important;
          padding: 0 5px !important;

          .nav_wrap {
            padding: 25px 0 !important;
          }

          .nav_uploader {
            width: 55px !important;

            .nav_img {
              width: 55px !important;
            }
          }

          .nav_name {
            margin-top: 8px !important;
            font-size: 13px !important;
          }

          .nav_item {
            height: 45px !important;
            font-size: 13px !important;
          }
        }

        .form {
          min-height: 80vh !important;
          padding: 22px 25px 22px !important;

          .form_tit {
            font-size: 15px !important;
            margin-bottom: 45px !important;
          }

          .form_content {
            width: 56% !important;
          }

          .width_100 {
            width: 100% !important;
          }

          // 个人简介适配
          .form_basic {
            width: 70% !important;

            .basic_tit {
              font-size: 13px !important;
              padding: 6px 0 !important;
              margin-bottom: 16px !important;

              img {
                width: 16px !important;
              }
            }

            .basic_head {
              padding-bottom: 16px !important;

              .basic_uploader {
                width: 55px !important;

                .basic_camera {
                  width: 16px !important;
                  bottom: 1px !important;
                  right: -1px !important;
                }

                .basic_img {
                  width: 55px !important;
                }
              }
            }

            .company_form {
              .company_input {
                width: 48% !important;
              }

              .custom_textarea {
                width: 100% !important;
              }
            }
          }

          // 暂无采购商品
          .empty_tip {
            font-size: 13px !important;
            padding-top: 180px !important;
          }

          .card_wrap {
            margin-bottom: 5px !important;
          }

          .form_upload {
            width: 190px !important;

            .img {
              width: 25px !important;
            }

            .text {
              font-size: 10px !important;
            }

            .card_icon {
              width: 14px !important;
              top: 5px !important;
              right: 5px !important;
            }

            .upload_abo {
              font-size: 11px !important;
            }
          }

          .mt_10 {
            margin-top: 25px !important;
          }

          .stu_tit {
            margin-bottom: 22px !important;
          }

          .stu_top {
            aspect-ratio: 16/3.9 !important;
            padding-left: 40px !important;
            margin: 0px 0 22px 0 !important;

            .stu_cont {
              width: 390px !important;
              height: 30px !important;
              margin-bottom: 12px !important;

              &:last-child {
                margin-bottom: 0 !important;
              }
            }
          }

          // 培训流程样式
          .stu_process {
            .process_item {
              &:not(:last-child):after {
                left: 16px !important;
              }

              .process_cont {
                height: 52px !important;
              }

              .process_title {
                font-size: 12px !important;
              }

              .process_icon {
                width: 25px !important;
                margin-right: 12px !important;
              }
            }
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 10px !important;

              .select_all {
                font-size: 10px !important;
                gap: 4px !important;

                .checkbox {
                  width: 10px !important;
                  height: 10px !important;

                  .sign_img {
                    width: 5px !important;
                  }
                }
              }

              .delete_btn {
                padding: 3px 6px !important;
                font-size: 9px !important;
              }
            }
          }

          .product_list {
            .product_item {
              padding: 10px 0 !important;
              gap: 8px !important;

              .item_checkbox {
                .checkbox {
                  width: 14px !important;
                  height: 14px !important;

                  .sign_img {
                    width: 6px !important;
                  }
                }
              }
              .item_image {
                width: 60px !important;
                height: 60px !important;
              }

              .item_info {
                .item_title {
                  font-size: 11px !important;
                  margin-bottom: 4px !important;
                }

                .item_desc {
                  font-size: 9px !important;
                }
              }

              // .item_quantity {
              //   gap: 2px !important;
              //   margin-right: 10px !important;
              //   padding: 2px 4px !important;

              //   .quantity_btn {
              //     width: 12px !important;
              //   }

              //   .quantity_btn_plus {
              //     width: 9px !important;
              //   }

              //   .quantity_input {
              //     width: 35px !important;
              //     height: 18px !important;
              //     font-size: 9px !important;
              //   }
              // }

              .item_delete {
                padding: 3px 6px 3px 0 !important;
                font-size: 9px !important;
              }
            }
          }

          // 采购清单样式适配
          .list_header {
            .header_left {
              gap: 10px !important;

              .select_all {
                font-size: 10px !important;
                gap: 4px !important;

                .checkbox {
                  width: 10px !important;
                  height: 10px !important;

                  .sign_img {
                    width: 5px !important;
                  }
                }
              }

              .delete_btn {
                padding: 3px 6px !important;
                font-size: 9px !important;
              }
            }
          }
        }

        .examine {
          padding: 120px 0px 0px !important;

          .img1 {
            width: 70px !important;
          }

          .img2 {
            width: 45px !important;
          }

          .exa_tit {
            font-size: 16px !important;
          }

          .exa_tip {
            font-size: 11px !important;
          }

          .exa_btn {
            width: 130px !important;
            margin-top: 25px !important;
            font-size: 12px !important;
            border-radius: 6px !important;
          }
        }
      }
    }

    .log_out {
      width: 370px !important;

      .tit {
        font-size: 14px !important;
        margin-bottom: 30px !important;
      }

      .btn {
        width: 100px !important;
        font-size: 11px !important;
      }

      .btn_bor {
        margin-right: 10px !important;
      }
    }
  }

  .relative_height {
    background: #f5f6fa;
    padding: 30px 0 50px 0;

    .info {
      .navbar {
        width: 287px;
        min-height: 87vh;
        background: #fff;
        margin-right: 20px;
        padding: 0 8px;
        box-sizing: border-box;

        .nav_wrap {
          padding: 40px 0;
        }

        .nav_uploader {
          position: relative;
          margin: 0 auto;
          width: 75px;
          aspect-ratio: 1/1;

          .nav_identity {
            width: 56px;
            position: absolute;
            bottom: -4px;
            right: 0px;
            left: 0px;
            margin: 0 auto;
            z-index: 3;
          }

          .nav_img {
            width: 75px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .nav_name {
          color: #3d3d3d;
          text-align: center;
          margin-top: 12px;
          font-size: 16px;
        }

        .nav_item {
          width: 100%;
          height: 60px;
          font-size: 16px;
          position: relative;

          &.active {
            color: #5463ff;
            background: rgba(84, 99, 255, 0.07);
          }
          .nav_line {
            width: 2px;
            height: 100%;
            background: #5463ff;
            position: absolute;
            left: 0;
          }
        }
      }

      .form {
        flex: 1;
        min-height: 87vh;
        box-sizing: border-box;
        background: #fff;
        padding: 30px 37px 30px;

        .form_tit {
          color: #3d3d3d;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 60px;
        }

        .form_basic {
          width: 70%;
          margin: 0 auto;

          .basic_tit {
            color: #3d3d3d;
            font-size: 16px;
            font-weight: bold;
            padding: 12px 0;
            margin-bottom: 22px;
            border-bottom: 1px solid #ebebeb;

            img {
              width: 23px;
              height: auto;
              margin-right: 10px;
            }
          }

          .basic_head {
            padding-bottom: 22px;

            .basic_uploader {
              position: relative;
              width: 75px;
              aspect-ratio: 1/1;
              margin-left: 30px;

              .basic_camera {
                width: 24px;
                height: auto;
                position: absolute;
                bottom: 3px;
                right: -1px;
                z-index: 25;
              }

              .basic_img {
                width: 75px;
                aspect-ratio: 1/1;
                border-radius: 50%;
                overflow: hidden;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }

          .company_form {
            .company_input {
              width: 48%;
            }

            .company_mb20 {
              margin-bottom: 40px;
            }

            .custom_textarea {
              width: 100%;
            }
          }
        }

        .form_content {
          width: 50%;
          margin: 0 auto;
        }

        .width_100 {
          width: 100%;
        }

        .stu_tit {
          margin-bottom: 30px;
        }

        .stu_top {
          width: 100%;
          aspect-ratio: 16/3.5;
          padding-left: 75px;
          margin: 0px 0 30px 0;
          box-sizing: border-box;
          background: url('../../image/mine/stu_bg.png') no-repeat;
          background-size: 100% 100%;

          .stu_cont {
            width: 528px;
            height: 43px;
            padding-left: 16px;
            font-size: 14px;
            margin-bottom: 21px;
            background: linear-gradient(
              90deg,
              rgba(255, 255, 255, 0.8) 0%,
              rgba(255, 255, 255, 0.4429) 60%,
              rgba(255, 255, 255, 0) 100%
            );
            border-radius: 20px 0 0 20px;

            img {
              width: 23px;
              height: auto;
              margin-right: 10px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        // 培训流程样式
        .stu_process {
          padding-bottom: 20px;

          .process_item {
            margin-bottom: 30px;
            position: relative;

            &:not(:last-child):after {
              content: '';
              position: absolute;
              top: 35px;
              left: 19px;
              height: calc(100% + 20px);
              border-left: 2px dashed #f0f0f0;
              z-index: 1;
            }

            .process_num {
              width: 39px;
              height: 39px;
              border-radius: 50%;
              background: url('../../image/mine/stu_icon.png') no-repeat;
              background-size: 100% 100%;
              margin: 15px 28px 0 0;
              z-index: 2;
              flex-shrink: 0;
            }

            .process_cont {
              border-radius: 10px;
              padding: 0 30px;
              height: 62px;
            }

            // 为每个process_cont设置不同的背景颜色和宽度
            &:nth-child(1) .process_cont {
              width: 55%;
              background: #f2f6ff;
            }

            &:nth-child(2) .process_cont {
              background: #fef5fa;
              width: 90%;
            }

            &:nth-child(3) .process_cont {
              width: 60%;
              background: #fefbf6;
            }

            &:nth-child(4) .process_cont {
              width: 80%;
              background: #f2faff;
            }

            &:nth-child(5) .process_cont {
              width: 75%;
              background: #f5f2ff;
            }

            &:nth-child(6) .process_cont {
              width: 45%;
              background: #effdf9;
            }

            &:nth-child(7) .process_cont {
              width: 63%;
              background: #fff5f2;
            }

            .process_title {
              font-size: 16px;
              color: #2a4c87;
            }

            .process_icon {
              width: 38px;
              height: auto;
              margin-right: 25px;
            }
          }
        }

        // 采购清单样式
        .list_header {
          padding: 15px 0 10px 0;

          .header_left {
            gap: 20px;

            .select_all {
              gap: 8px;
              font-size: 14px;
              color: #333;

              .checkbox {
                width: 16px;
                height: 16px;
                border: 1px solid #ddd;
                border-radius: 2px;
                position: relative;
                cursor: pointer;

                .sign_img {
                  width: 9px;
                  height: auto;
                }

                &.active {
                  background: #5463ff;
                  border-color: #5463ff;
                }
              }
            }

            .delete_btn {
              padding: 6px 12px;
              border: 1px solid rgba(61, 61, 61, 0.1);
              color: #3d3d3d;
              border-radius: 4px;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }

        .product_list {
          .product_item {
            padding: 20px 0;
            border-bottom: 1px solid #d8d8d8;
            align-items: center;
            gap: 15px;

            .item_checkbox {
              .checkbox {
                width: 21px;
                height: 21px;
                border: 2px solid #fff;
                border-radius: 5px;
                position: relative;
                cursor: pointer;
                background: #dde0ff;

                .sign_img {
                  width: 10px;
                  height: auto;
                }

                &.active {
                  background: #5463ff;
                  border: 2px solid #fff;
                }
              }
            }

            .item_image {
              width: 100px;
              height: 100px;
              flex-shrink: 0;
              position: relative;

              .img {
                width: 100%;
                height: 100%;
                overflow: hidden;
                border-radius: 8px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .img_pre {
                position: absolute;
                width: 20px;
                height: 20px;
                bottom: 0;
                right: 0;
                z-index: 2;
                border-radius: 2px;
                background: rgba(0, 0, 0, 0.3);

                img {
                  width: 55%;
                  height: auto;
                }
              }

              // 悬浮图片预览
              .image_preview {
                position: absolute;
                top: -75px;
                left: 120px; /* 调整这个值来控制预览框的位置 */
                width: 250px;
                height: 250px;
                background: #fff;
                box-shadow: 0px 4px 10px 0px rgba(12, 31, 80, 0.1608);
                z-index: 3;
                border-radius: 10px;
                overflow: hidden;
                border: 15px solid #fff;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 10px;
                }
              }
            }

            .item_info {
              flex: 1;
              min-width: 0;

              .item_title {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 8px;
                line-height: 1.4;
              }

              .item_desc {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.5);
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }

            // .item_quantity {
            //   align-items: center;
            //   gap: 5px;
            //   margin-right: 20px;
            //   border-radius: 3px;
            //   padding: 4px 8px;
            //   border: 0.8px solid #d9d9d9;

            //   .quantity_btn {
            //     width: 19px;
            //     height: auto;
            //     border-radius: 4px;
            //     color: #333;
            //     font-size: 14px;
            //     cursor: pointer;
            //   }

            //   .quantity_btn_plus {
            //     width: 15px;
            //     height: auto;
            //   }

            //   .quantity_input {
            //     width: 50px;
            //     height: 28px;
            //     text-align: center;
            //     font-size: 14px;
            //     outline: none;
            //     border: none;
            //   }

            //   /* 移除所有浏览器的上下箭头 */
            //   input[type='number'] {
            //     -moz-appearance: textfield; /* Firefox */
            //     appearance: textfield; /* 其他现代浏览器 */
            //   }

            //   /* 针对 WebKit 浏览器（Chrome, Safari, Edge） */
            //   input[type='number']::-webkit-outer-spin-button,
            //   input[type='number']::-webkit-inner-spin-button {
            //     -webkit-appearance: none;
            //     margin: 0;
            //   }
            // }

            .item_delete {
              padding: 6px 12px 6px 0;
              color: #3d3d3d;
              border-radius: 4px;
              font-size: 14px;
              cursor: pointer;

              &.active {
                color: #5463ff;
              }
            }
          }
        }

        // 暂无采购商品
        .empty_tip {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.5);
          text-align: center;
          padding-top: 400px;
        }

        .custom-label {
          margin-bottom: 25px;
        }

        .eye-icon {
          width: 27px;
          height: auto;
        }

        /* 默认提示文字样式 */
        .form-tip {
          color: #999;
          font-size: 14px;
          padding: 2px 0 0 10px;
        }

        .card_wrap {
          margin-bottom: 10px;
        }

        .form_upload {
          width: 280px;
          aspect-ratio: 16/9;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          cursor: pointer;
          overflow: hidden;
          position: relative;

          .upload_img {
            width: 76%;
            aspect-ratio: 16/10;
            border-radius: 6px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .upload_abo {
            width: 100%;
            aspect-ratio: 16/2;
            font-size: 14px;
            color: #5463ff;
            text-align: center;
            background: rgba(84, 99, 255, 0.15);
            position: absolute;
            bottom: 0;
          }

          .card_img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .form_blue{
          border: 1px solid #5463ff;
        }

        .mt_10 {
          margin-top: 30px;
        }
      }

      .examine {
        text-align: center;
        padding: 225px 0px 0px;
        box-sizing: border-box;

        .img1 {
          width: 110px;
          height: auto;
        }

        .img2 {
          width: 72px;
          height: auto;
        }

        .exa_tit {
          font-size: 20px;
          color: #333;
          font-weight: bold;
          margin: 34px 0 16px;
        }

        .exa_tip {
          font-size: 16px;
          color: rgba(51, 51, 51, 0.6);
        }

        .exa_btn {
          width: 170px;
          aspect-ratio: 16/4.1;
          margin: 0px auto;
          margin-top: 28px;
          color: #fff;
          font-size: 15px;
          border-radius: 10px;
          background: #5463ff;
        }

        .exa_prompt {
          width: 80%;
          background: #f8f9fd;
          margin: 0 auto;
          padding: 25px 50px;
          margin-top: 40px;

          text-align: left;
          .pro_tit {
            font-size: 16px;
            color: #333;
            margin-bottom: 14px;
          }
          .pro_cont {
            font-size: 14px;
            color: rgba(51, 51, 51, 0.58);

            img {
              width: 14px;
              margin: 2px 10px 0 0;
            }
          }
        }
      }

      .next_btn {
        width: 100%;
        height: 53px;
        color: #fff;
        font-size: 16px;
        border-radius: 13px;
        background: #5463ff;
        margin-top: 30px;
      }
    }
  }

  // 退出登录
  .log_out {
    width: 480px;
    aspect-ratio: 3/1.1;

    .tit {
      color: #333;
      font-size: 18px;
      margin-bottom: 43px;
    }

    .btn {
      width: 130px;
      aspect-ratio: 3/0.8;
      font-size: 14px;
      color: #fff;
      border-radius: 38px;
      background: #5463ff;
    }

    .btn_bor {
      color: #595959;
      background: #fff;
      margin-right: 15px;
      border: 1px solid rgba(0, 0, 0, 0.15);
    }
  }

  // label文字
  :deep(.el-form-item__label) {
    font-size: 16px;
    color: #333;
    margin-bottom: 11px;
  }
  // 输入外框
  :deep(.el-input__wrapper) {
    height: 53px;
    border-radius: 13px;
    box-shadow: 0 0 0 1px #5463ff inset;
  }
  // 输入框文字
  :deep(.el-input__inner) {
    color: #202020;
    font-size: 16px;
  }
  // 红色提示文字
  :deep(.el-form-item__error) {
    margin-top: 3px;
  }
  // 输入框聚焦时蓝色边框
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #5463ff inset !important;
  }

  // disabled状态的输入框背景
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #f5f6ff !important;
    border: none !important;
    box-shadow: none !important;
    cursor: auto !important;
  }
  // disabled状态的输入框文字
  :deep(.el-input.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #3d3d3d !important;
    cursor: auto !important;
  }

  :deep(.el-input.is-disabled .el-input__inner::placeholder) {
    -webkit-text-fill-color: #999 !important;
  }

  // Textarea 文本域样式
  :deep(.el-textarea .el-textarea__inner) {
    color: #202020;
    font-size: 16px;
    border-radius: 13px;
    padding: 12px 15px;
    min-height: 87px;
    resize: none;
    box-shadow: 0 0 0 1px #5463ff inset;
  }

  // 自定义textarea样式
  .custom_textarea {
    width: 100%;
  }

  :deep(.el-textarea .el-textarea__inner:focus) {
    box-shadow: 0 0 0 1px #5463ff inset;
  }

  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: #f5f6ff !important;
    -webkit-text-fill-color: #3d3d3d !important;
    border-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: auto !important;
  }

  :deep(.el-textarea.is-disabled .el-textarea__inner::placeholder) {
    -webkit-text-fill-color: #999 !important;
  }

  // Select 选择框样式
  :deep(.el-select__wrapper) {
    height: 53px;
    color: #202020;
    font-size: 16px;
    border-radius: 13px;
    box-shadow: 0 0 0 1px #5463ff inset;
  }
  :deep(.el-select__wrapper.is-focused),
  :deep(.el-select__popper .is-hovering .el-select__wrapper) {
    box-shadow: 0 0 0 1px #5463ff inset !important;
  }

  // disabled状态的输入框文字
  :deep(.el-select__wrapper.is-disabled) {
    -webkit-text-fill-color: #3d3d3d !important;
    background-color: #f5f6ff !important;
    border: none !important;
    box-shadow: none !important;
    cursor: auto !important;
  }

  :deep(.el-select__wrapper.is-disabled::placeholder) {
    -webkit-text-fill-color: #999 !important;
  }

  // 下拉面板选中/悬停主题色
  :deep(.el-select-dropdown__item.selected) {
    color: #5463ff !important;
    font-weight: 600;
  }
  :deep(.el-select-dropdown__item:hover) {
    background-color: rgba(84, 99, 255, 0.1) !important;
    color: #5463ff !important;
  }

  // 日期选择器样式
  :deep(.el-date-editor.el-input__wrapper) {
    height: 53px;
    color: #202020;
    font-size: 16px;
    border-radius: 13px;
    box-shadow: 0 0 0 1px #5463ff inset;
  }

  :deep(.el-date-editor.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #5463ff inset !important;
  }

  :deep(.el-date-editor.is-disabled .el-input__wrapper) {
    background-color: #f5f6ff !important;
    border: none !important;
    box-shadow: none !important;
    cursor: auto !important;
  }

  :deep(.el-date-editor.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #3d3d3d !important;
    cursor: auto !important;
  }

  :deep(.el-date-editor.is-disabled .el-input__inner::placeholder) {
    -webkit-text-fill-color: #999 !important;
  }

  // 日期选择器图标颜色和位置
  :deep(.el-date-editor .el-input__prefix) {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  :deep(.el-date-editor.is-disabled .el-input__prefix) {
    color: #3d3d3d !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: auto !important;
  }

  // 确保图标在右侧
  :deep(.el-date-editor .el-input__prefix-inner) {
    position: relative !important;
    right: 0 !important;
  }

  // 强制图标位置
  :deep(.el-date-editor .el-input__prefix .el-icon) {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  // 退出登录弹窗
  :deep(.el-dialog__header) {
    padding: 0;
  }
  :deep(.el-dialog) {
    padding: 0;
    width: fit-content;
    border-radius: 13px;
  }
</style>

// 全局样式覆盖 Element Plus MessageBox
<style>
  body .el-message-box .el-message-box__status.el-icon {
    color: #5463ff !important;
  }

  /* 最强优先级覆盖 */
  html body .el-overlay .el-message-box .el-message-box__btns .el-button--primary {
    background-color: #5463ff !important;
    border-color: #5463ff !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
  }

  html body .el-overlay .el-message-box .el-message-box__btns .el-button--default {
    color: #606266 !important;
    border-color: #dcdfe6 !important;
    background-color: #fff !important;
  }

  html body .el-overlay .el-message-box .el-message-box__btns .el-button--default:hover {
    color: #5463ff !important;
    border-color: #5463ff !important;
    background-color: #fff !important;
  }

  html body .el-overlay .el-message-box .el-message-box__btns .el-button--default:focus {
    color: #5463ff !important;
    border-color: #5463ff !important;
    background-color: #fff !important;
  }
</style>
